<template>
  <view class="container">
    <!-- 顶部图片 -->

	<!-- <view class="activity_header"
			:style="{'background-image':`url(${urlDomain+'crmebimage/presets/group_list_bg.png'})`}">
		<view class='cart_nav'>
			<nav-bar navTitle="拼团列表" iconColor='#fff' :backgroundColor="backgroundColor"
				:isBackgroundColor="isBackgroundColor" ref="navBarRef"></nav-bar>
		</view>
	</view> -->
	

		<!-- <view class="cart_nav" style='"height:100rpx;"'>
			<nav-bar iconColor='#fff' ref="navBarRef" :isBackgroundColor="false" navTitle="停车交费">
			</nav-bar>
		</view> -->

	<view style="background-image: url(../../static/tabBar/top.png);width: 100%;height: 300rpx;">


	</view>
    <!-- <image class="top-image" src="../../static/tabBar/top.png"></image> -->


	<!-- 查询交费 -->
	<view class="center-container">
		<view class="rounded-box plate-number-input">
			<text>请输入车牌号</text>
			<view class="input-box">
				<input type="text" v-model="plateNumber.firstChar" maxlength="1" placeholder="苏" />
				<input v-for="(item, index) in plateNumber.restChars" :key="index" type="text" maxlength="1" />
				<button v-if="!isNewEnergy" @click="addPlateChar">+</button>
				<button v-else @click="addPlateChar">新能源</button>
			</view>
			<view class="plate-number-suggest">
			<text v-for="(suggest, index) in plateNumberSuggestions" :key="index">{{ suggest }}</text>
			</view>
			<!-- 查询并交费按钮 -->
			<button class="query-pay-button" @click="queryAndPay">查询并交费</button>
		</view>
	</view>

   
    <!-- 温馨提示 -->
    <view class="warm-tip">
      <text>温馨提示：请缴费后15分钟内离场，否则系统将重新计费</text>
    </view>

    <!-- 功能图标区 -->
    <view class="rounded-box function-icons">
      <view class="icon-item" @click="viewPaymentRecords">
        <image class="icon" src="../../static/tabBar/jfjl.png"></image>
        <text>缴费记录</text>
      </view>
      <view class="icon-item" @click="manageVehicles">
        <image class="icon" src="../../static/tabBar/clgl.png"></image>
        <text>车辆管理</text>
      </view>
      <view class="icon-item" @click="issueInvoice">
        <image class="icon" src="../../static/tabBar/kjfp.png"></image>
        <text>开具发票</text>
      </view>
      <view class="icon-item" @click="enableAutoPay">
        <image class="icon" src="../../static/tabBar/mmzf.png"></image>
        <text>免密支付</text>
      </view>
      <view class="icon-item" @click="contactCustomerService">
        <image class="icon" src="../../static/tabBar/lxkf.png"></image>
        <text>联系客服</text>
      </view>
    </view>

    <!-- 会员停车权益说明 -->
    <view class="rounded-box member-rights">
      <text>会员停车权益说明</text>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      plateNumber: {
        firstChar: '苏',
        restChars: Array(5).fill('')
      },
      plateNumberSuggestions: ['苏EF12345', '苏EF12345', '苏EF12345', '苏EF12345'],
      isNewEnergy: false,
      // 增加一个字段用于存储车辆类型相关提示信息
      vehicleTypeTips: {
        newEnergy: "新能源车牌请完整输入7位字符",
        normal: "普通车牌请完整输入6位字符"
      }
    };
  },
  methods: {
    addPlateChar() {
      // 判断是否新能源车牌，处理车牌位数逻辑
      if (this.isNewEnergy) {
        // 新能源车牌逻辑
        if (this.plateNumber.restChars.length < 6) {
          this.plateNumber.restChars.push('');
        } else {
          console.log(this.vehicleTypeTips.newEnergy);
        }
      } else {
        if (this.plateNumber.restChars.length < 5) {
          this.plateNumber.restChars.push('');
        } else {
          console.log(this.vehicleTypeTips.normal);
        }
      }
    },
    queryAndPay() {

      // 跳转到缴费收银台
      console.log('点击缴费收银台');

      uni.navigateTo({
        url: '/pages/parking/checkstand_pay/index',

        fail: (err) => {
          console.error('跳转失败', err);
          uni.showToast({ title: '跳转失败，请稍后再试', icon: 'none' });
        }
		  });

      // 调用接口查询并进行缴费逻辑，可使用uni.request等方法
      // const plateNumber = this.plateNumber.firstChar + this.plateNumber.restChars.join('');
      // // 示例请求
      // uni.request({
      //   url: '/your_query_pay_api',
      //   method: 'POST',
      //   data: { plateNumber },
      //   success: (res) => {
      //     // 处理成功回调，这里简单添加一个提示
      //     uni.showToast({
      //       title: '缴费成功',
      //       icon: 'success'
      //     });
      //   },
      //   fail: (err) => {
      //     // 处理失败回调，这里简单添加一个提示
      //     uni.showToast({
      //       title: '缴费失败，请重试',
      //       icon: 'fail'
      //     });
      //   }
      // });
    },
    viewPaymentRecords() {

      // 跳转到缴费记录页面逻辑
      console.log('点击缴费记录');

      uni.navigateTo({
        url: '/pages/parking/payment_records/index',

        fail: (err) => {
          console.error('跳转失败', err);
          uni.showToast({ title: '跳转失败，请稍后再试', icon: 'none' });
        }
		  });
    },
    manageVehicles() {

      console.log('点击车辆管理');

      uni.navigateTo({
        url: '/pages/parking/car_manage/index',

        fail: (err) => {
          console.error('跳转失败', err);
          uni.showToast({ title: '跳转失败，请稍后再试', icon: 'none' });
        }
		  });

    },
    issueInvoice() {
      // 跳转到开具发票页面逻辑
      // 等待开通
      console.log('点击开具发票');

      uni.navigateTo({
        url: '/pages/parking/issue_invoice/index',

        fail: (err) => {
          console.error('跳转失败', err);
          uni.showToast({ title: '跳转失败，请稍后再试', icon: 'none' });
        }
		  });
    },
    enableAutoPay() {
      // 跳转到免密支付页面逻辑-和开具发票使用同一个页面
      // 等待开通
      console.log('点击免密支付');

      uni.navigateTo({
        url: '/pages/parking/issue_invoice/index',

        fail: (err) => {
          console.error('跳转失败', err);
          uni.showToast({ title: '跳转失败，请稍后再试', icon: 'none' });
        }
		  });

      // 处理免密支付逻辑，这里简单添加一个提示
      // uni.showModal({
      //   title: '免密支付',
      //   content: '确认开启免密支付？',
      //   confirmText: '确认',
      //   cancelText: '取消',
      //   success: (res) => {
      //     if (res.confirm) {
      //       uni.showToast({
      //         title: '免密支付已开启',
      //         icon: 'success'
      //       });
      //     }
      //   }
      // });
    },
    contactCustomerService() {
      // 处理联系客服逻辑，如拨打电话、跳转客服页面等，这里简单添加一个提示
      uni.showModal({
        title: '联系客服',
        content: '您可以选择拨打电话或跳转客服页面进行咨询',
        confirmText: '拨打电话',
        cancelText: '跳转客服页面',
        success: (res) => {
          if (res.confirm) {
            // 这里只是示例，实际需要调用拨打电话的 API
            console.log('模拟拨打电话');
          } else {
            // 这里只是示例，实际需要跳转到客服页面
            uni.navigateTo({ url: '/pages/customerService' });
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  /* padding: 20rpx; */
}

.center-container {
  width: 95%;
  margin: 0 auto; /* 水平居中 */
  padding: 20rpx 0; /* 可选：增加上下间距 */
}

.top-image {
  width: 100%;
  height: 300rpx;
  display: block;
}

.cart_nav {
	position: fixed;
	@include main_bg_color(theme);
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	}

.rounded-box {
  background-color: rgba(255, 255, 255, 1.00);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  // box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05); /* 可选阴影 */
}

.member-rights{
	float: right;
	background-color: transparent !important;
}

.input-box {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  gap: 10rpx; /* 可选：增加输入框之间的间距 */
}

.input-box input,
.input-box button {
  flex: 1;
  height: 100rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 32rpx; /* 可选：加大 + 号字体更清晰 */
  margin: 0 5rpx; /* 可选：调整间距 */
  text-align: center;
}



.plate-number-suggest {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.plate-number-suggest text {
  margin-right: 10rpx;
  background-color: #f5f5f5;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
}

.query-pay-button {
  width: 85%; /* 占父容器宽度的 60% */
  height: 90rpx;
  background-color: #ff6666;
  color: white;
  border: none;
  border-radius: 40rpx; /* 圆角半径 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 38rpx; /* 可适当调整字体大小 */
  margin: 20rpx auto; /* 居中显示 */
}

.warm-tip {
  margin-top: 40rpx;   /* 距离上面白框的距离 */
  margin-bottom: 40rpx; /* 距离下面白框的距离 */
  color: #ff3333;
  padding: 20rpx;
   /* 可选：给提示区域加个浅黄背景色更醒目 */
  /* background-color: #fffbe6; */
  border-radius: 16rpx;
}
.function-icons {
  display: flex;
  justify-content: space-around;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  width: 50rpx;
  height: 50rpx;
}
</style>